<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }
    </style>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
</head>
<body>

<div id="app">
    <el-container>
        <el-main>
            <el-button type="primary" @click="addUser">新增用户</el-button>

            <input type="text" v-model="username" placeholder="搜索用户名">
            <el-button type="primary" @click="searchUser">搜索</el-button>


            <el-table :data="user" style="width: 100%">
                <el-table-column prop="username" label="用户名" width="180"></el-table-column>
                <el-table-column prop="password" label="密码" width="180"></el-table-column>
                <el-table-column prop="email" label="邮件地址" width="180"></el-table-column>
                <el-table-column prop="role" label="角色" width="180"></el-table-column>
                <el-table-column prop="status" label="用户状态" width="180"></el-table-column>
                <el-table-column prop="address" label="地址" width="180"></el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="editUser(scope.row)" type="primary" size="small">编辑</el-button>
                        <el-button @click="deleteUser(scope.row)" type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    :total="totalUsers"
                    layout="total, prev, pager, next, jumper">
            </el-pagination>
        </el-main>
    </el-container>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user: [],
            currentPage: 1,
            pageSize: 10,
            totalUsers: 0,
            username: ''
        },
        methods: {
            // 模糊查询
            searchUser() {
                axios.get('/user/search_user', {
                    params: {
                        username: this.username,
                        pageNum: 1,
                        pageSize: this.pageSize
                    }
                })
                    .then(response => {
                        if (response.data) {
                            this.user = response.data.records;
                            this.totalUsers = response.data.total;
                        } else {
                            this.$message.error("搜索用户失败:" + response.data.message);
                        }
                     })
                    .catch(error => {
                        this.$message.error("搜索用户失败:" + error.message);
                     });
            },
            // 编辑用户
            editUser(user) {
                // 跳转到编辑用户页面
                window.location.href = "edit.html?id=" + user.id;
            },
            // 新增用户
            addUser() {
                // 跳转到新增用户页面
                window.location.href = "add.html";
            },
            // 删除用户
            deleteUser(user) {
                this.$confirm('确认删除该用户吗？')
                   .then(() => {
                        this.handleDeleteUser(user);
                    })
                   .catch(() => {
                        this.$message.info('已取消删除');
                    });
            },
            // 处理删除用户请求
            handleDeleteUser(user) {
                axios.delete('/user/delete', {
                    params: {
                        id: user.id
                    }
                })
                    .then(response => {
                        if (response.data !== null) {
                            this.$message.success("删除用户成功");
                            this.fetchUser(this.currentPage, this.pageSize);
                        } else {
                            this.$message.error("删除用户失败:" + response.data.message);
                        }
                     })
                    .catch(error => {
                        this.$message.error("删除用户失败:" + error.message);
                     });
            },
            // 获取用户列表
            fetchUser(pageNum = 1, pageSize = 10) {
                axios.get('/user/user_list', {
                    params: {
                        pageNum: pageNum,
                        pageSize: pageSize
                    }
                })
                    .then(response => {
                        if (response.data) {
                            this.user = response.data.records;  // 假设返回的数据结构中包含 `records`
                            this.totalUsers = response.data.total; // 假设返回的数据中包含 `total`
                        }
                    })
                    .catch(error => {
                        this.$message.error("获取用户列表失败:" + error.message);
                    });
            },
            handlePageChange(pageNum) {
                this.currentPage = pageNum;
                this.fetchUser(pageNum, this.pageSize);
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.fetchUser(currentPage, this.pageSize);
            }
        },
        created() {
            this.fetchUser(this.currentPage, this.pageSize);
        }

    });
</script>
</body>
</html>
